[給心理人的前端網頁開發] 08 關卡一：自介履歷的開發環境 - codesandbox - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天

2022 iThome 鐵人賽

DAY 8

Modern Web

給心理人的前端網頁開發系列第 8 篇

[給心理人的前端網頁開發] 08 關卡一：自介履歷的開發環境 - codesandbox

14th鐵人賽

ayugioh2003

2022-09-23 23:45:47

952 瀏覽

分享至

在關卡一中，我們將寫出一個自介履歷網頁。不過我們先來介紹一下開發環境：codesandbox，並用此開發環境複習一下 Hello World 範例。明天才正式開始寫自介履歷的部份。

一、線上開發環境：codesandbox

之前寫 Hello World 時，為了降低初學者配置開發環境的門檻，使用了 Codepen 這個線上開發環境服務。實際上，在業界的網頁工程師，幾乎都是在電腦上的文字編輯器 or IDE 做開發。

在自己電腦上的文字編輯器上寫程式有很多好處，像是打字體驗比較好、有很多的插件可以使用、文字編輯器的樣式可以挑選自己喜歡的。但一樣，為了降低學習的門檻、減少開發環境的配置時間，我們採用了一個線上服務：codesandbox。

之所以採用 codesandbox 是有些原因的：

它是線上開發環境，不用自己在電腦上安裝與整理開發環境
可以在資料夾中新增很多檔案。不像 codepen 只能在 HTML、CSS、JS 區塊寫程式

因此在 codesandbox 寫網頁，體驗會很像是在電腦的文字編輯器上寫網頁。請依照教學或自行 Google，嘗試建立一個 static 的 sandbox

延伸教學資源

二、codesandbox 上的 Hello World，跟 codepen 差在哪裡

請點擊以下兩個連結，體驗一下 codesandbox 與 codpen 兩者的差別

差別一：資料夾結構

在 codepen 中，因為它是要給使用者快速 demo 網頁用，所以整個界面只有三個區塊 (HTML、CSS、JavaScript) 可以寫程式。但 codesandbox 就像是在電腦上的文字編輯器一樣，可以載入一個資料夾底下的全部檔案，並且可以新增、修改與刪除檔案。例如這個 hello world 的 codesandbox 頁面，就有 html, css 與 js 的檔案。

至於 package.json 與 sandbox.config.json 兩個檔案，請先忽略他們。package.json 是 JavaScript 專案的產物，可以用來記錄專案的額外資訊。sandbox.config.json 是 CodeSandBox 線上服務的設定檔。在這次的系列文中不需要去理解他們。

差別二：HTML 的寫法

在 codepen 中，我們 HTML 語法只有短短的兩行

<div>Hello World!</div>
<button>Click Me</button>

但在 codesandbox 中，卻有十五行

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello World</title>
    <link href="./main.css" rel="stylesheet"></link>
    <script src="./main.js" defer></script>
  </head>
  <body>
    <div>Hello World!</div>
    <button>Click Me</button>
  </body>
</html>

這是因為 CodePen 為了方便快速開發與 Demo 網頁，省略了很多東西。CodeSandBox 的 HTML 語法才是比較完整的。接下來將介紹 CodeSandBox 裡面多出來的 HTML 語法在幹麻。

三、HTML 的結構

在完整的 HTML 結構中，至少會有以下的標籤：

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
  </body>
</html>

<!DOCTYPE html> 指的是，這份檔案的文件類型是 html (HTML5)。在很久之前，HTML 是有分版本的，例如 XHTML 1.1、HTML 4.01。但就像秦始皇的書同文、車同軌政策，現在的 HTML 也統一規定說，DOCTYPE 直接九天玄女唯一指定 html 就好，不用再指定其他版本號了。

<html lang="en"></html> 是這個 HTML 檔案的根元素。我們可以把一個 HTML 檔案，把裡面的標籤元素都抓出來，最後會形成一個到過來的樹。而 <html></html> 這個元素則是最上層的根節點。

         +-------+
         | html  |
         +---+---+
             |
    +--------+------+
    |               |
 +--+---+        +---+--+
 | head |        | body |
 +--+---+        +---+--+
    |                |    
+---+---+       +----+----+
| title |       |         |
+-------+   +---+--+   +--+--+
            |  h1  |   |  p  |
            +---+--+   +--+--+
                |         |
              text      text

<head></head> 顧名思義，是這個 HTML 文件的頭部。無關內容顯示的一些額外資訊，會放到 <head></head> 這個標籤裡面。另外，CodeSandBox 需要手動引入 CSS 與 JS 語法到 HTML 檔案裡面，分別會使用到 <link></link> 與 <script></script> 標籤。

<head>
  <meta charset="UTF-8"> // 網頁文件使用的編碼類型
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> // 行動裝置的顯示方式，initial-scale=1.0 代表不縮放
  <meta http-equiv="X-UA-Compatible" content="ie=edge"> // 給 IE 的兼容模式，但應該不需要惹
  <title>Hello World</title> // 網頁標題，會出現在瀏覽器 tab 上
  <link href="./main.css" rel="stylesheet"></link> // 引入 CSS 檔案
  <script src="./main.js" defer></script> // 引入 JS 檔案
</head>

<body></body> 這裡面主要就是放網頁上會顯示出來的內容了。基本上會跟 CodePen 上 HTML 區塊中的語法一模一樣。

<body>
  <div>Hello World!</div>
  <button>Click Me</button>
</body>

小結

今天的文章提到了這些事情

線上開發環境 CodeSandBox 介紹
用 CodeSandBox 改寫 Hello World 範例
CodeSandBox 與 CodePen 的差異、為什麼用 CodeSandBox 不用電腦上的文字編輯器
HTML 的結構

明天將開始寫出一份自介履歷囉

[給心理人的前端網頁開發] 07 關卡〇：簡介開發環境

[給心理人的前端網頁開發] 09 關卡一：自介履歷 - HTML

系列文

給心理人的前端網頁開發共 20 篇

RSS系列文訂閱系列文

1 人訂閱

完整目錄

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

尚未有邦友留言

立即登入留言

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css react 程式設計 vue.js

IT邦幫忙

給心理人的前端網頁開發系列 第 8 篇